#{extends 'main_adm.html' /} #{set title:'Edição de Produto' /} #{form
@salvarCadastro(), enctype:'multipart/form-data'} #{/form}


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Cadastro</title>
<meta name="author" content="Jake Rocheleau">

<link rel="stylesheet" type="text/css" media="all"
	href="@{'public/stylesheets/form_style.css'}">
<link rel="stylesheet" type="text/css" media="all"
	href="@{'public/stylesheets/form_responsive.css'}">
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />


<script type="text/javascript"
	src="@{'public/javascripts/jquery.min.js'}"></script>
<script type="text/javascript"
	src="@{'public/javascripts/jquery.maskedinput-1.3.min.js'}"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

</head>

<body>

	<section id="container">

		<h2>Cadastro - Produto</h2>

		#{form @edita(), enctype:'multipart/form-data',
		name:'form_cadProduto', id:'form_cadProduto'}

		<div id="wrapping" class="clearfix">
			<section id="aligned">
				<h3>Dados do Produto:</h3>

				#{field 'produto.id'}
				<p class="${field.errorClass}">
					<input type="hidden" name="${field.name}" value="${produto?.id}"
						id="nome" autocomplete="off" tabindex="10" class="txtinput"
						required> <span class="error">${field.error}</span>
				</p>
				#{/field}
				#{field 'produto.dataCadastro'}
				<p class="${field.errorClass}">
					<input type="hidden" name="${field.name}" value="${produto?.dataCadastro}"
						id="nome" autocomplete="off" tabindex="10" class="txtinput"
						required> <span class="error">${field.error}</span>
				</p>
				#{/field}
				#{field 'descricao'}
				<p class="${field.errorClass}">
					<input type="hidden" name="${field.name}" value="${produto?.descricao}"
						id="nome" autocomplete="off" tabindex="10" class="txtinput"
						required> <span class="error">${field.error}</span>
				</p>
				#{/field}
				
				
				

				#{field 'produto.nome'}
				<p class="${field.errorClass}">
					<input type="text" name="${field.name}" value="${produto?.nome}"
						id="nome" autocomplete="off" tabindex="10" class="txtinput"
						required> <span class="error">${field.error}</span>
				</p>
				#{/field} #{field 'produto.descricao'}
		        <p class="${field.errorClass}">
		             <textarea cols="40" id="descricao" rows="8" name="${field.name}" value="${produto?.descricao}" maxlength="300" placeholder="Descrição do Produto"></textarea>
		            <span class="error">${field.error}</span>
		        </p>
		    #{/field} 
			</section>

			<section id="aside" class="clearfix">
				<section id="recipientcase">


					#{field 'valor'}
					<p class="${field.errorClass}">
						<input type="text" name="${field.name}" value="${valor}"
							id="valor" tabindex="11" class="txtinput"
							onKeyUp="moeda(this)" required> <span class="error">${field.error}</span>
					</p>
					#{/field}

					<h4>Categoria:</h4>


					#{select 'categoria.id', value:categoria?.nome, id:'listaCat',
					name:'listaCat', tabindex:'6', class:'selmenu'}
					<option value="${produto.categoria.id}">${produto.categoria.nome}</option>
					 #{list categorias,
					as:'categoria'} #{option value="${categoria.id}"} ${categoria.nome}
					#{/option} #{/list} #{/select}

					<h4>Quantidade:</h4>


					#{field 'produto.quantidadeEmEstoque'}
					<p class="${field.errorClass}">
						<input type="number" name="${field.name}"
							value="${produto?.quantidadeEmEstoque}" id="quant"
							autocomplete="off" tabindex="12" min="0" required> <span
							class="error">${field.error}</span>
					</p>
					#{/field}

					<h4>Imagem:</h4>
					<div id="imagem">
						 <span class="thumb"> #{field 'uploadFile'} <input
							class="uploadFile" value="${uploadFile}" name="${field.name}"
							id="uploadFile" type="file" name="myPhoto"
							onChange="PreviewImage();" /> #{/field}  <img
							class="uploadButton" alt=" title="
							src="@{'public/images/Image_Upload.png'}" />
						</span> <img class="uploadImg" id="uploadPreview"
							style="width: 160px; height: 130px;" />
					</div>

				</section>

			</section>
		</div>


		<section id="buttons">
			<input type="reset" name="reset" id="resetbtn" class="resetbtn"
				value="Limpar"> <input type="submit" onclick="return confirm('Deseja realmente alterar este produto?')" name="submit"
				id="submitbtn" class="submitbtn" tabindex="13" value="Enviar">
			<br style="clear: both;">
		</section>
		#{/form}
	</section>

</body>
</html>

<script type="text/javascript">

</script>

<script>
	function moeda(z) {
		v = z.value;
		v = v.replace(/\D/g, "") //permite digitar apenas números
		v = v.replace(/[0-9]{12}/, "inválido") //limita pra máximo 999.999.999,99
		v = v.replace(/(\d{1})(\d{8})$/, "$1.$2") //coloca ponto antes dos últimos 8 digitos
		v = v.replace(/(\d{1})(\d{5})$/, "$1.$2") //coloca ponto antes dos últimos 5 digitos
		v = v.replace(/(\d{1})(\d{1,2})$/, "$1,$2") //coloca virgula antes dos últimos 2 digitos
		z.value = v;
	}
</script>

<script type="text/javascript">
	function PreviewImage() {
		oFReader = new FileReader();
		oFReader.readAsDataURL(document.getElementById("uploadFile").files[0]);

		oFReader.onload = function(oFREvent) {
			document.getElementById("uploadPreview").src = oFREvent.target.result;
		};
	};
</script>


